<template>
  <div v-loading="formLoading" class="bg">
    <div class="btns routeHeader mb-5px">
      <el-button @click="goBack"> 关闭 </el-button>
    </div>
    <div class="formView" :style="`height: ${contentHeight}px`">
          <div class="logoBox">
            <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
            <div class="logoTitleBox">
              <div class="logoTitle">江苏江顺精密机电设备有限公司</div>
              <div>不合格品评审处理单</div>
            </div>
          </div>
          <div class="firstCard">
            <el-row class="colItem">
              <el-col :span="12" class="cardItem">
                <div class="formTitle">编号</div>
                <el-input v-model="formData.checkTaskNumber" disabled/>
              </el-col>
              <el-col :span="12" class="cardItem">
                <div class="formTitle">客户名称</div>
                <el-input v-model="formData.customerName" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">部件编号</div>
                <el-input v-model="formData.productNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">部件名称</div>
                <el-input v-model="formData.partNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">规格</div>
                <el-input v-model="formData.specification" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">产品编号</div>
                <el-input v-model="formData.productNumber" disabled />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">不合格数量</div>
                <el-input v-model="formData.exceptionQuantity" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">单位</div>
                <el-input v-model="formData.unit" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">图纸图号</div>
                <el-input v-model="formData.drawingNumber" disabled />
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle">发现工序</div> 
                <el-select v-model="formData.dictDiscoveryProcess" placeholder="请选择发现工序" disabled>
                <el-option
                 v-for="dict in getIntDictOptions('dict_discovery_process')"
                 :key="dict.value"
                 :label="dict.label"
                  :value="dict.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="6" class="cardItem">
                <div class="formTitle">供应商名称</div>
                <el-input v-model="formData.supplierName" disabled>
                  <template #append>
                    <el-button :icon="Search" />
                  </template>
                  </el-input>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color:red">*</span>物料类型</div>
                <el-select v-model="formData.dictMaterialType" placeholder="请选择物料类型" disabled>
                <el-option
                 v-for="dict in getIntDictOptions('dict_material_type')"
                 :key="dict.value"
                 :label="dict.label"
                  :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color:red">*</span>责任部门</div>
                <el-select v-model="formData.dictResponsibleDept" placeholder="请选择责任部门" disabled>
                <el-option
                 v-for="dict in getIntDictOptions('dict_responsible_dept')"
                 :key="dict.value"
                 :label="dict.label"
                  :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" class="cardItem">
                <div class="formTitle"><span style="color:red">*</span>责任人</div>
                <el-input v-model="formData.responsiblePersonName" disabled>
                  <template #append>
                    <el-button :icon="Search" />
                  </template>
                  </el-input>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">问题描述</div>
                <el-input
                  v-model="formData.problemDescription"
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                  disabled
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                  <div class="formBigTitle">问题描述附件</div>
                  <el-form-item  prop="fileName">
                    <el-button v-if="formData.problemAttachmentFileName" class="upLoadFile" type="primary" @click="openFile(formData.problemAttachmentFilePath)">{{
                      formData.problemAttachmentFileName
                    }}</el-button>
                  </el-form-item>  
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem"
              :style="{backgroundColor:formData.dictNcrStatus==10&&!viewStatus ?'':'#f5f7fa'}">
                <div class="formBigTitle">处理结果</div>
                <el-radio-group v-model="formData.dictNcrProcessResult" class="radioGroup" disabled>
                <el-radio :label="10">退货</el-radio>
                <el-radio :label="20">换货</el-radio>
                <el-radio :label="30">维修</el-radio>
                <el-radio :label="40">设计变更</el-radio>
                <el-radio :label="50">返工</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col 
              :span="24" 
              class="cardItem prevention" 
              :style="{backgroundColor:formData.dictNcrStatus==10&&!viewStatus ?'':'#f5f7fa'}">
                <div class="formBigTitle">是否纠正预防</div>
                <el-radio-group 
                v-model="formData.dictCorrectivePrevention "
                class="radioGroup" 
                :disabled="formData.dictNcrStatus!==10 || viewStatus">
                <el-radio :label="10">是</el-radio>
                <el-radio :label="20">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle"><span style="color:red">*</span>原因分析</div>
                <el-input
                  v-model="formData.originalAnalysis"
                  disabled
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle"><span style="color:red">*</span>纠正预防措施</div>
                <el-input
                  v-model="formData.correctivePreventionAction"
                  disabled
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                  <div class="formBigTitle">原因分析附件</div>
                  <!-- <UploadFile
                   v-model="originalAnalysisAttachmentFileList"
                   :fileSize="200"
                   :fileType="[ 'pdf', 'png', 'jpg']"
                   @update:modelValue="uploadOriginalFileRes"
                   :isShowTip="false"
                   :buttonStatus="!viewStatus"
                   class="upLoadFile"
                   ref="uploadFile2"
                    /> -->
                  <el-form-item  prop="fileName">
                    <el-button v-if="formData.originalAnalysisAttachmentFileName" class="upLoadFile" type="primary" @click="openFile(formData.originalAnalysisAttachmentFilePath)">{{
                      formData.originalAnalysisAttachmentFileName
                    }}</el-button>
                  </el-form-item>  
              </el-col>
            </el-row>
            <el-row class="colItem">
              <el-col :span="24" class="cardItem">
                <div class="formBigTitle">说明</div>
                <el-input
                  v-model="formData.remark"
                  disabled
                  maxlength="200"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  type="textarea"
                />
              </el-col>
            </el-row>
          </div>
    </div>
  </div>
</template>
<script setup>
import {getIntDictOptions } from '@/utils/dict'
import * as DefectiveProductRecordApi from '@/api/quality/qualitycontrol/DefectiveProductRecord'
// import UploadFile from '../QualityMgmtNcr/UploadFile.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { Search } from '@element-plus/icons-vue'
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({})
const contentHeight = ref(0)
const problemAttachmentFileList =ref([]) //问题描述附件
const originalAnalysisAttachmentFileList  =ref([])//原因分析附件

/**返回 */
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path: '/quality/quality/qualitycontrol/defectiveProductRecord'
  })
}

// 查看文件
const openFile = (path) => {
  if (!path) {
    message.notifyError('附件不存在!')
    return
  }
  window.open(path)
}

//问题描述附件
// const FilePathFn = async(url)=>{
//   console.log(url,'url')
//   // window.open(url);
// }

const { query } = useRoute() // 路由的查询
/** 初始化 */
onMounted(async () => {
  contentHeight.value = document.body.clientHeight - 132 - 60
  if (query.id) {
    formData.value = await DefectiveProductRecordApi.getDefectiveProductRecord(query.id) 
  }
  if(formData.value.problemAttachmentFileName !=null){
      problemAttachmentFileList.value.push({
        name:formData.value.problemAttachmentFileName,
        url:formData.value.problemAttachmentFilePath,
      })
    } 
    // 问题描述文件显示
    if(formData.value.originalAnalysisAttachmentFileName !=null){
      originalAnalysisAttachmentFileList.value.push({
        name:formData.value.originalAnalysisAttachmentFileName,
        url:formData.value.originalAnalysisAttachmentFilePath,
      })
    } 
})
</script>
<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;
}
.bg{
  background-color:white;
  padding-top: 10px;
}

.upLoadFile{
  margin-left: 10px;
 ::v-deep .el-upload-list--text{
    display:flex;
    width:120px;
  }
}

.formView {
  overflow-y: auto;
  padding:50px;
}

.btns {
  margin-bottom: 10px;
  padding-left: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 20px;
}

.logoBox{
  display: flex;
  align-items: center;
.logo {
  width: 300px;
  height: 80px;
}
  .logoTitleBox{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding-right: 250px;
  .logoTitle {
  font-size: 34px;
  text-align: center;
}
:last-child{
  display: flex;
  justify-content: center;
}
}
}

.radioGroup{
  display: flex;
  flex:1;
  justify-content: center;
}
.firstCard {
  border: 1px solid #000;

  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .newCardItem {
    border-left: 1px solid #000;
  }

  .newFormTitle {
    width: 150px;
    height: 36.5px;
    line-height: 32px;
    background: #e9fbfb;
    text-align: center;
    border-right: 1px solid #000;
  }
  ::v-deep .upload-file-uploader{
  display: flex;
  }

  .disFlex {
    display: flex;
  }

  .alignCenter {
    align-items: center;
  }

  .top-border {
    border-top: 1px solid #000;
  }

  .colItem + .colItem {
    border-top: 1px solid #000;
  }

  .editType {
    display: flex;
    align-items: center;

    > div {
      width: 14.2857%;
      text-align: center;
    }

    .editTypeTitle {
      background: #e9fbfb;
    }

    > div + div {
      border-left: 1px solid #000;
    }
  }

  .cardItem {
    display: flex;
    align-items: center;
    line-height: 30px;

    .formTitle {
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      line-height: 32px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }

    .formBigTitle {
      width: 150px;
      flex-shrink: 0;
      line-height: 73px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }
  }

  .cardItem + .cardItem {
    border-left: 1px solid #000;
  }
}
</style>
